<template>
  <section id="logistics" class="clearfix">
    <div class="search">
      <header class="header">
        <h4 class="title">价格透明 随时下单</h4>
      </header>
      <div>
        <div class="form-wrap">
          <!-- 找物流 -->
          <el-form ref="line" :model="line" v-show="logisticsServiceType === 0" @submit.prevent="submit">
            <el-form-item>
              <el-select size="small" class="form-item-select" v-model="line.type" placeholder="物流方式">
                <el-option
                  v-for="item in line.types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-row :gutter="5">
                <el-col :span="12">
                  <el-input size="small" class="form-item-input" v-model="line.fullDeparture" placeholder="始发地"></el-input>
                </el-col>

                <el-col :span="12">
                  <el-input size="small" class="form-item-input" v-model="line.fullDestination" placeholder="目的地"></el-input>
                </el-col>
              </el-row>

            </el-form-item>

            <el-form-item>
              <el-input size="small" class="form-item-input" v-model="line.keyword" placeholder="请输入关键词搜索"></el-input>
            </el-form-item>

            <el-form-item class="form-submit">
              <a :href="`${platform.CONSTANT_JUMORE_YUN_URL}/search?lineType=${line.type}&keyword=${line.keyword}&fullDeparture=${line.fullDeparture}&fullDestination=${line.fullDestination}`"
                 target="_blank"
                 class="search-btn">搜全站</a>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <!--右侧-->
    <div class="logistics-content">
      <div class="item" v-for="item in data" :key="item.picturePath">
        <img v-lazyload.cdn="item.picturePath" alt="">

        <div class="mark">
          <h3 class="title">{{ item.name }}</h3>
          <a :href="item.path" target="_blank" class="link">查看详情</a>
        </div>
      </div>

    </div>
  </section>
</template>
<script>
  import platform from '~/config/platform'

  export default {
    props: {
      data: {
        type: Array,
        'default' () {
          return []
        }
      }
    },
    data () {
      return {
        // 选中的服务类型
        logisticsServiceType: 0,

        // 找物流
        line: {
          type: '',

          types: [
            {
              value: 231,
              label: '公路'
            }, {
              value: 232,
              label: '铁路'
            }, {
              value: 233,
              label: '内河航运'
            }, {
              value: 234,
              label: '海运'
            }, {
              value: 237,
              label: '空运'
            }, {
              value: 235,
              label: '仓储'
            }
          ],
          keyword: '',
          fullDeparture: '',
          fullDestination:''
        },

        platform: platform
      }
    },
    methods: {
      submit () {
        return
      },
      /**
       * 切换物流服务
       * @param type
       */
      changeLogisticsService (type) {
        this.logisticsServiceType = type
      },

      searchLogistics () {
      }
    }
  }

</script>
<style lang="scss" type="text/scss" scoped>
  @import "../../element-variables";

  .search {
    width: 220px;
    height: 263px;
    float: left;
    padding: 29px 20px 20px;
    position: relative;
    background: url("~assets/img/logistics-bg.png") no-repeat;
    .header {
      text-align: left;
      color: #fff;
    }

    .form-wrap{
      padding-top: 15px;
    }
    .title {
      font-size: 20px;
      font-weight: normal;
    }
    .search-btn {
      width: 100%;
      height: 30px;
      font-size: 16px;
      background: #F64F38;
      color: #fff;
      border: none;
      text-align: center;
      outline: none;
      display: block;
      cursor: pointer;
      border-radius: 2px;

      &:hover {
        background-color: rgba(246,79,56, .8);
      }
    }
    .form-item-select {
      width: 100%;
    }
  }

  .logistics-content{
    padding: 20px;
    float: left;
    margin-left: -12px;
    .item{
      float: left;
      margin-left: 10px;
      width: 460px;
      height: 222px;
      position: relative;

      img{
        width: 460px;
        height: 222px;
      }

      &:before{
        content: '';
        position: absolute;
        overflow: hidden;
        background-color: rgba(0,0,0,.33);
        top:0;
        bottom:0;
        right: 0;
        left: 0;
      }

      &:hover{
        .link{
          display: inline-block;
        }

        .mark{
          top: 40%;
        }
      }
    }

    .mark{
      position: absolute;
      color: #fff;
      width: 100%;
      top:50%;
      text-align: center;
      margin-top: -30px;
      transition: all .3s;

      .title{
        font-size: 36px;
        padding-bottom: 10px;
        font-weight: normal;
      }

      .link{
        width: 128px;
        line-height: 32px;
        border: 1px solid #fff;
        border-radius: 2px;
        background-color: transparent;
        display: none;
        font-size: 16px;
        text-align: center;
      }
    }
  }

</style>
